<!--  -->
<template>
  <div class='register'>
    <div class="top">
      <div class="title">{{hospitalStore.hospitalInfo.hospital?.hosname}}</div>
      <div class="level">
        <svg t="1694507623212" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17733" width="16" height="16"><path d="M832 364.8h-147.2s19.2-64 32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z" p-id="17734" fill="#1296db"></path></svg>
        <span>{{hospitalStore.hospitalInfo.hospital?.param.hostypeString}}</span>
      </div>
    </div>
    <!-- 展示内容区域 -->
    <div class="content">
      <div class="left">
        <img :src="`data:image/jpg;base64,`+hospitalStore.hospitalInfo.hospital?.logoData" alt="">
      </div>
      <div class="right">
        <div>挂号规则</div>
        <div class="time">
          预约周期：10天 放号时间：{{hospitalStore.hospitalInfo.bookingRule?.releaseTime}}停挂时间：{{hospitalStore.hospitalInfo.bookingRule?.stopTime}}
        </div>
        <div class="address">
          具体位置：{{hospitalStore.hospitalInfo.hospital?.param.fullAddress}}
        </div>
        <div class="route">
          具体路线：{{hospitalStore.hospitalInfo.hospital?.route}}
        </div>
        <div class="releasetime">
          退号时间：就诊前一工作日{{hospitalStore.hospitalInfo.bookingRule?.quitTime}}前取消
        </div>
        <div class="rule">预约挂号规则</div>
        <div class="ruleInfo" v-for="(item,index) in hospitalStore.hospitalInfo.bookingRule?.rule" :key="index">
          {{item}}
        </div>
      </div>
    </div>
    <!-- 放置每一个医院的科室的数据 -->
    <div class="deparment">
      <div class="leftNav">
        <ul>
          <li @click="changeIndex(index)"  v-for="(deparment,index) in hospitalStore.deparmentArr" :key="deparment.depcode" :class="{active:index==currentIndex}">{{deparment.depname}}</li>
        </ul>
      </div>
      <div class="deparmentInfo">
        <!-- 用一个div代表：大科室与小科室 -->
        <div class="showDeparment" v-for="(deparment) in hospitalStore.deparmentArr" :key="deparment.depcode" >
          <h1 class="cur">{{deparment.depname}}</h1>
          <!-- 每一个大的科室下小科室 -->
          <ul>
            <li @click="showLogin(item)" v-for="(item) in deparment.children" :key="item.depcode">{{item.depname}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {ref} from 'vue'
import {useRouter,useRoute} from 'vue-router';
// 引入医院详情仓库的数据
import useDetailStore from '@/store/modules/hospitalDetail';
// 获取user仓库的数据（visiable)可以控制login组件的对话框显示与隐藏
import useUserStore from '@/store/modules/user.ts';
// 获取路器
let $router=useRouter();
// 获取路由对象
let $route=useRoute();


let useStore=useUserStore();
let hospitalStore=useDetailStore();

// 控制科室高亮的响应式数据
let currentIndex=ref<number>(0);

// 左侧大的科室点击的事件
const changeIndex=(index:number)=>{
  currentIndex.value=index;
  // 点击导航获取右侧科室（大的科室H1标题）
  let allH1=document.querySelectorAll('.cur');
  // console.log(allH1);
  
  // 滚动到对应科室的位置
  allH1[currentIndex.value].scrollIntoView({
    behavior:'smooth',//过渡动画效果
    block:'start'//滚动到位置 默认起始位置
  });
}
// 点击科室按钮回调
// item:即为用户选中科室的数据
const showLogin=(item:any)=>{
  // 登录组件对话框弹出来
  // useStore.visiable=true;
  // 点击某一个医院科室按钮，进入到相应的预约挂号详情页面
  // 跳转到预约挂号详情页面
  // console.log(item);
  $router.push({path:'/hospital/register_step1',query:{hoscode:$route.query.hoscode,depcode:item.depcode}})
  
}

</script>
<style scoped lang='scss'>
.register{
  .top{
    display: flex;
    .title{
      font-size: 30px;
      font-weight: 900;
    }
    .level{
      color:#7f7f7f;
      margin-left:10px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 12px;
      span{
        margin-left: 5px;
      }
    }
  }
  .content{
    display: flex;
    margin-top:20px;
    .left{
      width: 80px;
      img{
        width:80px;
        height: 80px;
        border-radius: 50%;
      }
    }
    .right{
      flex:1;
      font-size: 14px;
      margin-left: 20px;
      .time,.address,.route,.releasetime,.ruleInfo{
        margin-top:10px;
        color:#7f7f7f
      }
      .rule{
        margin:10px 0px;
      }
    }
  }
}

.deparment{
  width:100%;
  height: 500px;
  display: flex;
  margin-top:20px;
  .leftNav{
    width: 80px;
    height: 100%;
    ul{
      width: 100%;
      height: 100%;
      background: rgb(248,248,248);
      display: flex;
      flex-direction: column;
      li{
        flex: 1;
        text-align: center;
        color: #7f7f7f;
        font-size: 14px;
        line-height: 40px;
        &.active{
          border-left: 1px solid red;
          color: red;
          background: white;
        }
      }
    }
  }
  .deparmentInfo{
    flex: 1;
    margin-left: 20px;
    height: 100%;
    overflow: auto;
    &::-webkit-scrollbar{
      display: none;
    }
    .showDeparment{
      h1{
        background-color: rgb(248,248,248);
        color:#7f7f7f;
      }
      ul{
        display: flex;
        flex-wrap: wrap;
        li{
          color:#7f7f7f;
          width:33%;
          line-height: 30px;
        }
      }
    }
  }
}
</style>